<template>
  <BasicTabs v-model="tabname" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus_Winder from '../components/tabComponents/winding/groupStatus_Winder.vue'
  import GroupDetail from '../components/tabComponents/winding/groupDetail.vue'
  import GroupClassReport from '../components/tabComponents/winding/groupClassReport.vue'
  import MachineClassReport from '../components/tabComponents/winding/machineClassReport.vue'
  import SingleIngotDetail from '../components/tabComponents/winding/singleIngotDetail.vue'
  import SingleIngotClassReport from '../components/tabComponents/winding/singleIngotClassReport.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '11210',
      label: '状态总览',
      roles: ['11210'],
      slots: { default: h(GroupStatus_Winder, { statusCode: '11210', processName: '络筒' }) }
    },
    {
      name: '11280',
      label: '分组详情',
      roles: ['11280'],
      slots: { default: h(GroupDetail, { statusCode: '11280', processName: '络筒' }) }
    },
    {
      name: '11290',
      label: '分组班报',
      roles: ['11290'],
      slots: { default: h(GroupClassReport, { statusCode: '11290', processName: '络筒' }) }
    },
    {
      name: '11240',
      label: '整机班报',
      roles: ['11240'],
      slots: {
        default: h(MachineClassReport, { statusCode: '11240', processName: '细纱' })
      }
    },
    {
      name: '11220',
      label: '单锭详情',
      roles: ['11220'],
      slots: { default: h(SingleIngotDetail, { statusCode: '11220' }) }
    },
    {
      name: '11250',
      label: '单锭班报',
      roles: ['11250'],
      slots: { default: h(SingleIngotClassReport, { statusCode: '11250' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
